<template>
  <el-card>
    <h1>{{ id ? "编辑" : "创建" }}学生</h1>
    <el-form
      :model="form"
      label-width="100px"
      ref="formRef"
      :rules="formRules"
    >
      <el-form-item
        label="所属班级"
        prop="parent"
      >
        <el-select v-model="form.parent">
          <el-option
            v-for="items in classList"
            :key="items._id"
            :label="items.className"
            :value="items._id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="学生编号"
        prop="stuNum"
      >
        <el-input
          class="fiw"
          v-model="form.stuNum"
        />
      </el-form-item>
      <el-form-item
        label="学生名字"
        prop="stuName"
      >
        <el-input
          class="fiw"
          v-model="form.stuName"
        />
      </el-form-item>
      <el-form-item
        label="性别"
        prop="sex"
      >
        <el-select v-model="form.sex">
          <el-option
            label="男"
            value="男"
          />
          <el-option
            label="女"
            value="女"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="save()"
        >
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  props: {
    id: {},
  },
  data() {
    return {
      form: {
        jf:0
      },
      classList: [],
      formRules: {
        stuNum: [{ required: true, message: "不能为空", trigger: "blur" }],

        stuName: [
          { required: true, message: "请输入班级名称", trigger: "blur" },
        ],
        sex: [{ required: true, message: "请输入班级名称", trigger: "blur" }],
        parent: [{ required: true, message: "选择班级", trigger: "blur" }],
      },
    };
  },
  created() {
    this.id && this.fetch();
    this.getClass();
  },

  methods: {
    async fetch() {
      const rs = await this.$http.get(`rest/students/${this.id}`);
      this.form = rs.data;
      console.log(this);
    },
    async getClass() {
      const rs = await this.$http.get("rest/classes");
      this.classList = rs.data;
      console.log("班级");
      console.log(rs.data);
    },
    async save() {
      console.log(this.form);
      let rs;
      if (this.id) {
        this.$refs.formRef.validate(async (valid) => {
          if (!valid) return;
          rs = await this.$http.put(`rest/students/${this.id}`, this.form);
          if (rs.status !== 200) return;
          this.$message({
            message: "成功",
            type: "success",
          });
          this.$router.push({ path: "/student/list" });
        });
      } else {
        this.$refs.formRef.validate(async (valid) => {
          if (!valid) return;
          rs = await this.$http.post("rest/students", this.form);
          if (rs.status !== 200) return;
          this.$message({
            message: "成功",
            type: "success",
          });
          this.$router.push({ path: "/student/list" });
        });
      }
      // if (rs.status !== 200) return;
      // this.$message({
      //   message: "成功",
      //   type: "success",
      // });
      // this.$router.push({ path: "/class/list" });
    },
  },
};
</script>

<style lang="scss" scoped>
.fiw {
  width: 200px;
}
.el-form {
  margin-top: 30px;
}
</style>
